<template>
    <div class="top-bar" :class="{ 'scroll-dowm': scrollDown, 'scroll-up': scrollUp }">
        <!-- 滚动1 -->
        <div class="panel-one">
            <h1>简云社CFS</h1>
            <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">首页<el-icon>
                        <House />
                    </el-icon></el-menu-item>
                <el-menu-item index="2">活动<el-icon>
                        <Compass />
                    </el-icon></el-menu-item>
                <el-menu-item index="3">云知道<el-icon>
                        <ChatDotRound />
                    </el-icon></el-menu-item>
                <el-menu-item v-if="loginInfo.role == 'admin'" index="4">云社管理平台<el-icon>
                        <Monitor />
                    </el-icon></el-menu-item>
            </el-menu>

            <!-- 搜索栏 -->
            <div class="search-panel">
                <el-input placeholder="请输入内容" v-model="searchWord" v-show="activeIndex !== '4'" />
                <el-button type="primary" v-show="activeIndex !== '4'"> <el-icon>
                        <Search />
                    </el-icon>搜索</el-button>
            </div>

            <div class="user-part">
                <div class="message">
                    <el-badge :value="12">
                        <el-icon :size="20">
                            <Message />
                        </el-icon>
                    </el-badge>
                    消息
                </div>

                <div class="user-center">
                    <el-icon :size="20">
                        <UserFilled />
                    </el-icon>
                    个人主页
                </div>

                <div class="avatar">
                    <el-avatar shape="square" :src="loginInfo.avatar" />
                </div>
            </div>
        </div>
        <!-- 滚动二 -->
        <div class="panel-two">
            <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">推荐</el-menu-item>
                <el-menu-item index="3" style="margin-left: 15px;">关注</el-menu-item>
                <el-menu-item index="4" style="margin-left: 15px;">视频</el-menu-item>
            </el-menu>

            <!-- 搜索栏 -->
            <div class="search-panel" v-show="activeIndex !== '4'">
                <el-input placeholder="请输入内容" v-model="searchWord" v-show="activeIndex !== '5'" />
                <el-button type="primary" v-show="activeIndex !== '4'"> <el-icon>
                        <Search />
                    </el-icon>搜索</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue'
import { RoutesActiveMap, ActiveRoutesMap } from '@/utils/route-active';
import { useRouter } from 'vue-router';
import { getLoginUserInfo } from '@/api/user';
import { ElMessage } from 'element-plus';
import store from '@/store';
const router = useRouter()
// 激活的菜单
const activeIndex = ref('')
// 搜索词
const searchWord = ref('')
//登录信息
const loginInfo = ref({
    avatar: '',
    realName: '',
    role: ''
});

// 菜单选择
const handleSelect = (key: string, keyPath: string[]) => {
    activeIndex.value = key
    var pathName = ActiveRoutesMap.get(key);
    router.push({ name: pathName })

}

// 滚动
const scrollDown = ref(false)
const scrollUp = ref(false)

//判断滚动方向
const handleScroll = (e: any) => {
    //e.wheelDellta：可以用来获取鼠标的滚动方向，对于得到的值，只看正负，往上滚是正值，往下滚是负值。
    //火狐浏览器不支持这个方法，需要会用e.detail来获取滚轮的滚动方向，向上是负值，向下是正值
    let direction = e.deltaY > 0 ? 'down' : 'up';  //deltaY为正则滚轮向下，为负滚轮向上
    if (direction == 'down' && store.getters.getScrollFlag) {
        scrollUp.value = false;
        scrollDown.value = true;
        store.commit('setScrollFlag', false)
    }
    if (direction == 'up') {
        store.commit('setScrollFlag', false)
        // 滚动到顶部，切换顶栏展示
        scrollDown.value = false;
        scrollUp.value = true;
    }
}


// 挂载
onMounted(async () => {
    // 获取用户信息
    const res = await getLoginUserInfo()
    if (res.flag) {
        loginInfo.value = res.data;
    } else {
        ElMessage.warning("登录信息失效，请重新登录！");
        router.push('/login');
    }
    //根据路由名激活菜单
    activeIndex.value = RoutesActiveMap.get(router.currentRoute.value.name as string)!
    window.addEventListener('mousewheel', handleScroll)
})



</script>

<style scoped>
::v-deep .el-menu--horizontal>.el-menu-item {
    padding: 0;
    color: #8491a5;
    margin-right: 30px;
    transition: all 0.3s;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;

}

::v-deep .el-menu-item [class^=el-icon] {
    margin-right: 0px;
    margin-left: 5px;
    width: 20px;
}

/* 菜单栏聚焦 */
::v-deep .el-menu--horizontal>.el-menu-item:hover {
    color: #0965ea;
    background-color: white;
}


/* 菜单栏选中 */
::v-deep .el-menu--horizontal>.el-menu-item.is-active {
    color: #191B1F !important;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
}

/* 滚动 */
.scroll-dowm {
    transform: translateY(-60px);
}

.scroll-up {
    transform: translateY(0px);
}

/* 滚动面板 */
.top-bar {
    display: flex;
    height: 110px;
    margin: 0 auto;
    width: 1350px;
    flex-wrap: wrap;
    transition: all 0.4s ease-out;
    justify-content: center;

    .panel-one {
        background-color: white;
        width: 100%;
        display: flex;
        height: 55px;
        align-items: center;

        h1 {
            width: 13%;
            color: #0965ea;
            font-weight: bold;
            text-align: center;
        }

        .el-menu {
            width: 36%;
            height: 55px;
        }

        /* 搜索栏 */
        .search-panel {
            width: 28%;
            display: flex;
            align-items: center;

            /* 搜索按钮 */
            .el-button {
                margin-left: 10px;
                color: rgb(255, 255, 255);
                background-color: #257efa;
                border-radius: 30px;
                width: 100px;
                border: none;
                transition: all 0.3s;
            }

            .el-button:hover {
                background-color: #0b58c3;
            }
        }

        .user-part {
            padding-left: 20px;
            width: 17%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .message {
                transition: all 0.3s;
                color: rgba(87, 88, 89, 0.929);
                cursor: pointer;
                width: 15%;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                padding-top: 5px;

                .el-badge {
                    height: 18px;
                }
            }

            .message:hover {
                color: #409EFF;
            }

            .user-center {
                transition: all 0.3s;
                cursor: pointer;
                color: rgba(87, 88, 89, 0.929);
                padding-top: 5px;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                width: 26%;
            }

            .user-center:hover {
                color: #409EFF;
            }

            .avatar {
                width: 25%;
                height: 55px;
                align-items: center;
                display: flex;
                justify-content: center;
                line-height: 55px;

                img {
                    width: 35px;
                    height: 35px;
                }
            }
        }
    }

    .panel-two {
        margin-top: 5px;
        width: 74%;
        display: flex;
        height: 55px;

        .el-menu {
            width: 45%;
            height: 55px;
        }

        /* 搜索栏 */
        .search-panel {
            width: 40%;
            display: flex;
            align-items: center;

            /* 搜索按钮 */
            .el-button {
                margin-left: 10px;
                color: rgb(255, 255, 255);
                background-color: #257efa;
                border-radius: 30px;
                width: 100px;
                border: none;
                transition: all 0.3s;
            }

            .el-button:hover {
                background-color: #0b58c3;
            }
        }
    }


    /* 搜索输入框 */
    ::v-deep .el-input__wrapper {
        background-color: #f5f7f9;
        border-radius: 30px;
    }

    ::v-deep .el-input__inner {
        background-color: #f5f7f9;
    }

    ::v-deep .el-menu--horizontal.el-menu {
        border-bottom: none;
    }

}
</style>